import React from 'react';
import {Input, Icon} from 'antd';
import styles from './cell.less';

class SubEditCell extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value,
      editable: false,
    };
  }

  handleChange = (e) => {
    const value = e.target.value;
    this.setState({value});
  }

  check = () => {
    this.setState({editable: false});
    if (this.props.onChange) {
      this.props.onChange(this.state.value);
    }
  }

  edit = () => {
    this.setState({editable: true});
  }

  render() {
    const {value, editable} = this.state;

    return (<div className={styles.editable_cell}>
      {
        editable ?
          <div className={styles.editable_cell_input_wrapper}>
            <Input
              value={value}
              onChange={this.handleChange.bind(this)}
              onPressEnter={this.check.bind(this)}
            />
            <Icon
              type="check"
              className={styles.editable_cell_icon_check}
              onClick={this.check.bind(this)}
            />
          </div>
          :
          <div className={styles.editable_cell_text_wrapper}>
            {value || ' '}
            <Icon
              type="edit"
              className={styles.editable_cell_icon}
              onClick={this.edit.bind(this)}
            />
          </div>
      }
    </div>);
  }
}

export default SubEditCell;


